<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    <script type="text/javascript" src="jquery-1.11.3.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--默认样式=====-->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<!--显示进度条-->
<div class="progress">
    <div class="progress-bar" role="presentation" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
        50%
    </div>
</div>

<!--进度条为0时也可以见进度文字======-->
<div class="progress">
    <div class="progress-bar" role="presentation" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 2%">
        0%
    </div>
</div>

<!--列表组件++++后续加入徽章。。。-->
<div class="row">
    <div class="col-lg-4">
        <ul class="list-group">
            <li class="list-group-item">
                <span class="badge">15</span>
                列表1
            </li>
            <li class="list-group-item">
                <span class="badge">20</span>
                列表2
            </li>
            <li class="list-group-item">
                <span class="badge">44</span>
                列表3
            </li>
            <li class="list-group-item">
                <span class="badge">55</span>
                列表4
            </li>
        </ul>
    </div>
</div>

<!--情景类列表组件-->
<ul class="list-group">
    <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
    <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
    <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group"><!--用div写移入有一个移入地效果=======-->
    <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
    <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
</body>
</html>